<!--  Tree example section start -->
<section id="tree-examples">

    <div class="row match-height">
        <!-- Default Treeview -->
        <div class="col-md-4 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Default</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div id="default-treeview"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Collapsed Treeview -->
        <div class="col-md-4 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Collapsed</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div id="collapsed-treeview"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Expanded Treeview -->
        <div class="col-md-4 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Expanded</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div id="expanded-treeview"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <!-- Primary Colored Treeview -->
        <div class="col-md-4 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Primary Color Treeview</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div id="primary-color-treeview"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Custom Icon Treeview -->
        <div class="col-md-4 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Custom Icon</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div id="custom-icon-treeview"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tags As Badges Treeview -->
        <div class="col-md-4 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Tags As Badges</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div id="tags-badge-treeview"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <!-- No Border Treeview -->
        <div class="col-md-4 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">No Border</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div id="no-border-treeview"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Colourful Treeview -->
        <div class="col-md-4 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Colourful</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div id="colourful-treeview"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Node Override Treeview -->
        <div class="col-md-4 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Node Override</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div id="node-override-treeview"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <!-- Link Enabled Treeview -->
        <div class="col-md-4 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Link Enabled</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div id="link-enabled-treeview"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Disabled Treeview -->
        <div class="col-md-4 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Disabled</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div class="form-group">
                            <button type="button" class="btn btn-warning mr-2" id="btn-disable-all">Disable All</button>
                            <button type="button" class="btn btn-success" id="btn-enable-all">Enable All</button>
                        </div>
                        <div id="disabled-treeview"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Data Treeview -->
        <div class="col-md-4 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Data</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div id="data-treeview"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <!-- Searchable Tree -->
        <div class="col-md-6 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Searchable Tree</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div class="form-group">
                            <div class="seachbox mb-2">
                                <input type="text" class="form-control round" placeholder="Search" id="input-search" name="input-search">
                            </div>
                        </div>

                        <div class="row mb-1">
                            <div class="col-md-8 col-sm-12">
                                <div class="form-group">
                                    <label class="mr-1">
                                        <input type="checkbox" id="chk-ignore-case" value="false">
                                        Ignore Case
                                    </label>
                                    <label class="mr-1">
                                        <input type="checkbox" id="chk-exact-match" value="false">
                                        Exact Match
                                    </label>
                                    <label class="mr-1">
                                        <input type="checkbox" id="chk-reveal-results" value="false">
                                        Reveal Results
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <button type="button" class="btn btn-primary mr-2 mb-1 float-left" id="btn-search">Search</button>
                                <button type="button" class="btn btn-primary mb-1 float-left" id="btn-clear-search">Clear</button>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <div id="searchable-tree"></div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <div id="search-output"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Selectable Tree -->
        <div class="col-md-6 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Selectable Tree</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div class="form-group">
                            <div class="seachbox mb-2">
                                <input type="text" class="form-control round" placeholder="Identify Node..." id="input-select-node" name="input-select-node">
                            </div>
                        </div>

                        <div class="row mb-1">
                            <div class="col-md-3 col-sm-12">
                                <div class="form-group">
                                    <label>
                                        <input type="checkbox" id="chk-select-multi" value="false">
                                        Multi Select
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-9 col-sm-12">
                                <div class="form-group text-center">
                                    <button type="button" class="btn btn-success mr-2 mb-1 float-left select-node" id="btn-select-node">Select Node</button>
                                    <button type="button" class="btn btn-danger mr-2 mb-1 float-left select-node" id="btn-unselect-node">Unselect Node</button>
                                    <button type="button" class="btn btn-primary mb-1 float-left select-node" id="btn-toggle-selected">Toggle Node</button>
                                </div>
                            </div>
                        </div>

                        <div id="selectable-tree"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <!-- Expandible Tree -->
        <div class="col-md-6 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Expandible Tree</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div class="form-group text-center">
                            <button type="button" class="btn btn-success mr-2" id="btn-expand-all">Expand All</button>
                            <button type="button" class="btn btn-warning" id="btn-collapse-all">Collapse All</button>
                        </div>
                        <div id="expandible-tree"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Checkable Tree -->
        <div class="col-md-6 col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Checkable Tree</h4>
                </div>
                <div class="card-body">
                    <div class="card-body">
                        <div class="form-group text-center">
                            <button type="button" class="btn btn-success mr-2" id="btn-check-all">Check All</button>
                            <button type="button" class="btn btn-warning" id="btn-uncheck-all">Uncheck All</button>
                        </div>
                        <div id="checkable-tree"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // Tree example section end -->